<template>
  <div :class="this.swiperid" class="swiper-container">
    <div class="swiper-wrapper">
      <slot></slot>
    </div>
    <div :class="this.swiperid + 'pg'"></div>
  </div>
</template>

<script>
import Swiper from 'swiper';
import 'swiper/css/swiper.min.css';

export default {
  // props: ['swiperid'],
  props: {
    swiperid: {
      type: String,
      required: true,
      default: 'swiper',
    },
    space: {
      type: Number,
      default: 3,
    },
    slides: {
      type: Number,
      default: 3,
    },
  },
  mounted() {
    new Swiper('.' + this.swiperid, {
      slidesPerView: this.slides,
      // autoHeight: true,
      loop: true,
      spaceBetween: this.space,
      pagination: {
        el: '.' + this.swiperid + 'pg',
      },
    });
  },
};
</script>

<style scoped>
.swiper-container {
  height: 200px;
}
</style>
